<template>
  <div id="app" class="container">
    <br /><br />
    <div class="main clearfix">
      <div class="content">
        <div class="filter">
          <div class="filter-wrapper clearfix">
            <!-- 标题 -->
            <ul :class="{ 'filter-tag': true, extend: more }">
              <li :class="{ on: titleNum === -1, _j_tag: true }">
                <a href="javascript:;" @click="titleFn(-1, '')">全部</a>
              </li>
              <li
                data-tid="5e3286e8304b00003b0053d8"
                :class="{ _j_tag: true, on: titleNum === index }"
                v-for="(item, index) in titleArr"
                :key="item.id"
                @click="titleFn(index, item.id)"
              >
                <a href="javascript:;">{{ item.name }}</a>
              </li>
            </ul>
            <a
              href="javascript:void(0);"
              class="trigger _j_trigger_btn"
              @click="more = !more"
              >更多</a
            >
          </div>
        </div>
        <!-- 内容 -->
        <div class="guide-list">
          <div class="item clearfix" v-for="item in list.content" :key="item.id">
            <a  target="_blank" class="_j_item" @click="$router.push('/strategy/detail?id=' + item.id)">
              <div class="img">
                <img :src="item.coverUrl" />
              </div>
              <div class="detail">
                <h3>{{ item.title }}</h3>
                <ul>
                  {{
                    item.summary
                  }}
                </ul>
                <div class="extra">
                  <span class="location"><i></i>{{ item.destName }}</span>
                  <span class="view"><i></i>{{ item.viewnum }}</span>
                </div>
              </div>
            </a>
          </div>
          <div style="float: right">
            <div style="float: left">
              <span style="line-height: 30px">
                共 {{ list.totalPages }} 页 / {{ list.totalElements }}条&nbsp;&nbsp;&nbsp;</span
              >
            </div>
            <div id="pagination" class="jq-pagination" style="display: inline">
              <a
                class="prev disabled"
                href="javascript:void(0);"
                jp-role="prev"
                jp-data="0"
                @click="previousPage"
                >上一页</a
              ><a
                @click="previousPage"
                href="javascript:void(0);"
                jp-role="page"
                jp-data="1"
                class="active"
                >1</a
              ><a href="javascript:void(0);" jp-role="page" jp-data="2" @click="nextPage">2</a
              ><a
                class="next next-yanse"
                href="javascript:void(0);"
                jp-role="next"
                jp-data="2"
                @click="nextPage"
                >下一页</a
              ><a
                class="last"
                href="javascript:void(0);"
                jp-role="last"
                jp-data="2"
                @click="nextPage"
                >尾页</a
              >
            </div>
          </div>
        </div>
      </div>
      <div class="side-sales">
        <h3>本周热卖</h3>
        <ul>
          <li>
            <a href="javascript:;" target="_blank"
              ><span class="image"
                ><img src="../assets/images/wKgBEFs6E4yAPz00AAhnvJUJ1j8238.gif"
              /></span>
              <div
                title="广州长隆野生动物世界门票    随买随用 ／广州长隆旅游度假区／一票通玩 ／ 快速出票快捷入园 ／ 含空中览车及小火车/亲子乐园/赠送电子导览／自然零距离／广州长隆野生动物园"
                class="title"
              >
                广州长隆野生动物世界门票 随买随用 ／广州...
              </div>
              <span class="price">¥260</span>
            </a>
          </li>
          <li>
            <a href="javascript:;" target="_blank"
              ><span class="image"
                ><img src="../assets/images/wKgED1wweM2AVCMFAAzr37WPWDI967.gif"
              /></span>
              <div
                title="广州长隆欢乐世界门票   当天可买／广州长隆旅游度假区／快速出票快捷入园／收藏店铺送卷送攻略／广东番禺汉溪长隆/长隆成人票／情侣票／家庭票／双人票／儿童票"
                class="title"
              >
                广州长隆欢乐世界门票 当天可买／广州长隆旅...
              </div>
              <span class="price">¥187</span>
            </a>
          </li>
          <li>
            <a href="javascript:;" target="_blank"
              ><span class="image"
                ><img src="../assets/images/wKgED1wdwVmAVaZUADon6OL7_xw084.gif"
              /></span>
              <div
                title="当天可订/广州长隆野生动物世界门票/长隆野生动物园/广州长隆旅游度假区/含缆车小火车/南北门均可取票（提前1天规则退）"
                class="title"
              >
                当天可订/广州长隆野生动物世界门票/长隆野生...
              </div>
              <span class="price">¥256</span>
            </a>
          </li>
          <li>
            <a href="javascript:;" target="_blank"
              ><span class="image"
                ><img src="../assets/images/wKgBEFrEdj-Ac-nXAAOvgGsSLJI85.jpeg"
              /></span>
              <div
                title="广州长隆水上乐园门票 一票通玩（电子票／当地必玩／免预约／超级大喇叭/热浪谷/意想不到的水上乐园）"
                class="title"
              >
                广州长隆水上乐园门票 一票通玩（电子票／当地...
              </div>
              <span class="price">¥122</span>
            </a>
          </li>
          <li>
            <a href="javascript:;" target="_blank"
              ><span class="image"
                ><img src="../assets/images/wKgED1wk2LeAC2NJAAJQtab6Yqw67.jpeg"
              /></span>
              <div
                title="寻味广州1日游（6人小团·探黄埔军校陈家祠·电车看广州塔+沙面·西关美食秘籍·本地人带玩）"
                class="title"
              >
                寻味广州1日游（6人小团·探黄埔军校陈家祠·...
              </div>
              <span class="price">¥288</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { ApiStrategies, ApiStrategiesQuery } from "../request/api";
export default {
  data() {
    return {
      //标题数组
      titleArr: [],
      //标题高亮
      titleNum: -1,
      //更多
      more: false,
      //攻略列表
      list: [],
    };
  },
  async created() {
    //标题请求
    let res = await ApiStrategies();
    //判断请求是否成功
    if (res.code !== 200) {
      alert("请求失败");
      return;
    }
    this.titleArr = res.data;

    //攻略列表请求
    this.getStrategiesQuery("", 1);
  },
  methods: {
    //标题
    titleFn(index, id) {
      //标题高亮
      this.titleNum = index;
      //攻略列表请求
      this.getStrategiesQuery(id, 1);
    },
    //下一页
    nextPage() {
      this.getStrategiesQuery("", 2);
    },
    //上一页
    previousPage() {
      this.getStrategiesQuery("", 1);
    },
    //封装攻略列表请求
    async getStrategiesQuery(themeId, currentPage) {
      let res = await ApiStrategiesQuery(themeId, currentPage);
      //判断请求是否成功
      if (res.code !== 200) {
        alert("请求失败");
        return;
      }
      //赋值攻略列表数组
      this.list = res.data;
    },
  },
};
</script>

<style lang="less" scoped>
.next-yanse {
  color: white;
}
a {
  background-color: transparent;
  text-decoration: none;
  color: #ff9d00;
  cursor: pointer;
}

a:hover {
  outline: 0;
  text-decoration: underline;
  color: #ff8a00;
}

.container {
  width: 1000px;
  margin: 0 auto;
}

.crumb {
  margin-bottom: 20px !important;
  height: 20px;
  padding: 15px 0;
  color: #666;
  font-size: 12px;
  line-height: 20px;
  border-bottom: 1px solid #ededed;
}

.crumb {
  width: 1000px;
  font: 12px Arial, "Microsoft Yahei", "\5FAE\8F6F\96C5\9ED1", Tahoma, Helvetica,
    STHeiti, "Hiragino Sans GB";
  height: 20px;
  padding: 15px 0;
  color: #666;
  line-height: 20px;
  margin: 0 auto;
}

.crumb .item {
  float: left;
}

.crumb .item.cur {
  color: #ff7000;
}

.crumb a {
  color: #666;
  font-size: 12px;
}

.crumb .item a {
  color: #666;
  font-size: 12px;
}

.crumb .item em {
  margin: 0 6px;
  color: #999;
  font-family: "simsun";
  font-style: normal;
}

.crumb .drop {
  float: left;
}

.crumb .drop .hd {
  height: 20px;
}

.crumb .drop .hd a {
  display: block;
  height: 20px;
  _float: left;
  padding: 0 13px 0 5px;
}

.crumb .drop .bd {
  position: absolute;
  display: none;
  margin: 5px 0 0 -10px;
  _margin: 20px 0 0 -70px;
  z-index: 20;
  padding: 10px 0 8px 7px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
}

.crumb .drop .hd i {
  position: absolute;
  margin: 8px 0 0 3px;
  *margin: 4px 0 0 3px;
  width: 0;
  height: 0;
  border-top: 3px solid #ff7000;
  border-left: 3px dashed transparent;
  border-right: 3px dashed transparent;
  overflow: hidden;
  font-size: 0;
}

.crumb .drop.open .hd a {
  background-color: #ff7000;
  color: #fff;
}

.crumb .drop.open .hd i {
  border-top-color: #fff;
}

.crumb .drop.open .bd {
  display: block;
}

.crumb .drop .bd .arrow {
  position: absolute;
  left: 20px;
  top: -6px;
  width: 0;
  height: 0;
  border-bottom: 6px solid #e5e5e5;
  border-left: 6px dashed transparent;
  border-right: 6px dashed transparent;
  font-size: 0;
}

.crumb .drop .bd .arrow b {
  position: absolute;
  left: -6px;
  top: 2px;
  width: 0;
  height: 0;
  border-bottom: 6px solid #fff;
  border-left: 6px dashed transparent;
  border-right: 9px dashed transparent;
  font-size: 0;
  overflow: hidden;
}

.crumb .drop .col {
  float: left;
  width: 145px;
}

.crumb .drop .more {
  clear: both;
  padding: 10px 20px 0 0;
  text-align: right;
}

.crumb .drop h3 {
  padding-left: 7px;
  color: #333;
}

.crumb .drop li {
  float: left;
  display: inline;
  width: 137px;
  margin: 4px 8px 0 0;
  height: 21px;
  line-height: 20px;
  overflow: hidden;
}

.crumb .drop li a {
  display: block;
  height: 21px;
  padding: 0 7px;
  color: #333;
}

.crumb .drop .more a {
  color: #ff7000;
}

.content {
  float: left;
  width: 680px;
}

.filter {
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
}

.filter-wrapper {
  position: relative;
  width: 680px;
}

.filter-tag {
  float: left;
  width: 610px;
  text-align: center;
  height: 32px;
  overflow: hidden;
}

.filter-tag.extend {
  height: auto;
}

.filter .trigger {
  color: #ff9d00;
  line-height: 22px;
  position: absolute;
  right: 0;
  top: 0;
}

.filter-tag li {
  float: left;
  width: 89px;
  margin: 0 10px 10px 0;
  display: inline;
}

.filter-tag li a {
  display: block;
  height: 20px;
  border: 1px solid #e5e5e5;
  background-color: #f6f6f6;
  border-radius: 10px;
  color: #666;
  line-height: 20px;
}

.content .guide-list {
  float: none;
  width: auto;
}

.guide-list .item {
  height: 100%;
  margin-bottom: 35px;
  // 文字不允许换行（单行文本）
  white-space: nowrap;
  // 溢出部分隐藏
  overflow: hidden;
  // 文本溢出后，使用 ... 代替
  text-overflow: ellipsis;
}

.guide-list .item a {
  display: block;
}

.guide-list .img {
  float: left;
  display: inline;
  margin-right: 15px;
  width: 220px;
  height: 150px;
  position: relative;
  overflow: hidden;
}

.guide-list .detail {
  margin-left: 235px;
  height: 150px;
  position: relative;
}

.guide-list .img span {
  position: absolute;
  left: 0;
  top: 6px;
  background-color: #ff6262;
  line-height: 25px;
  padding: 0 5px;
  color: #fff;
  font-size: 12px;
  border-radius: 0 2px 2px 0;
}

.guide-list h3 {
  position: relative;
  top: -3px;
  margin-bottom: 12px;
  font-size: 18px;
  color: #333;
  line-height: 24px;
  font-weight: normal;
}

.guide-list a:hover h3 {
  color: #ff9d00;
}

.guide-list ul {
  line-height: 22px;
  font-size: 14px;
  color: #666;
}

.guide-list li {
  height: 22px;
  overflow: hidden;
}

.guide-list li:before {
  content: "";
  float: left;
  margin: 9px 9px 0 0;
  width: 6px;
  height: 6px;
  background-color: #ff9d00;
  border-radius: 50%;
}

.guide-list .extra {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  font-size: 14px;
  color: #666;
  line-height: 16px;
}

.guide-list .extra span {
  display: inline-block;
  margin-right: 20px;
}

.guide-list .location i,
.guide-list .view i {
  float: left;
  margin-right: 5px;
  display: inline-block;
  width: 14px;
  height: 16px;
  background: url(../assets/images/icon-guide.png) no-repeat 0 0;
  vertical-align: middle;
}

.guide-list .view i {
  margin-top: 1px;
  width: 18px;
  height: 14px;
  background-position: -20px 0;
}

.filter-tag li a:hover,
.filter-tag li.on a {
  text-decoration: none;
  color: #fff;
  background-color: #ffa800;
  border-color: #ffa800;
}

.crumb .drop .hd a:hover {
  text-decoration: none;
}

.crumb .drop li a:hover,
.crumb .drop li.on a {
  background-color: #fff1d7;
  color: #ff7000;
  text-decoration: none;
}

.guide-list .item a:hover {
  padding: 20px;
  margin: -20px;
  text-decoration: none;
  background-color: #f4f4f4;
}

.side-sales {
  float: right;
  width: 290px;
}

.side-sales h3 {
  font-size: 18px;
  margin: -3px 0 15px;
  font-weight: normal;
  color: #333;
  line-height: 24px;
}

.side-sales li {
  margin-bottom: 20px;
}

.side-sales li a {
  display: block;
  padding-left: 110px;
  height: 70px;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}

.side-sales .image {
  float: left;
  margin-left: -110px;
  width: 100px;
  height: 70px;
  overflow: hidden;
}

.side-sales .title {
  height: 40px;
  margin-bottom: 12px;
}

.side-sales .price {
  color: #ff9d00;
}

.side-sales li a:hover {
  text-decoration: none;
}

.side-sales li a:hover .title {
  color: #ff9d00;
}
</style>
